@import "../../styles/variables";

.header {
	background-image: url("./images/bg.png");
	padding: 0 10px;
	height: 60px;
	display: flex;

	img {
		user-select: none;
	}

	& > div {
		width: 100%;
		max-width: 1400px;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	h1 {
		flex: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 4px 0 4px;
		padding-right: 10px;
	}

	section {
		float: right;
	}

	nav {
		flex: 0 0 auto;
		display: flex;
		align-items: center;

		ul {
			display: flex;
			align-items: center;
			list-style: none;
			font-size: 14px;

			li {
				display: inline-block;
				margin: 0 10px;

				&.current a {
					color: #000000;
				}
			}
		}
	}

	a {
		text-decoration: none;
	}

	.controls {
		flex: 1;
		z-index: 1;

		input {
			color: #222222;
			background-color: transparent;
			border: 1px solid transparent;
			transition: border 150ms ease-in-out;
			text-overflow: ellipsis;

			&:hover, &:focus {
				border: 1px solid $primary-color;
				text-overflow: inherit;
			}
			&:focus {
				color: #000000;
			}
		}
	}

	li.divider {
		color: #c0c0c3;
		user-select: none;
		cursor: inherit;

		&:hover {
			color: #c0c0c3;
		}
	}
}

.headerLinks {
	margin-right: 20px;
	animation: fadein 1s;

	li, a {
		color: #2e3d4e;
		cursor: pointer;
		font-size: 13px;
		transition: color .1s ease-in-out;
		text-decoration: none;

		a:hover, &:hover {
			color: $primary-color;
			text-decoration: none;
		}
	}

	.userAccount {
		display: flex;
		align-items: center;

		img {
			width: 24px;
			height: 24px;
			border-radius: 12px;
			margin-right: 6px;
		}
	}
}

.selected a {
	color: $primary-color;
}

div ul li.logoutLink {
	margin-right: 0;

	button {
		font-size: 22px;
	}
}

@keyframes fadein {
	from { opacity: 0; }
	to   { opacity: 1; }
}
